<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>减少声明及语句数</title>
</head>
<body>
    <div id="box" style="width: 100px; height: 100px"></div>

    <script>
        const box = document.getElementById('box')

        // 减少对象的访问层级而提前做缓存
        // JS在代码执行之前的编译，会将w / h词法进行分析并进行一系列较为复杂的编译，从而消耗时间
        // var test = (el)=>{
        //     let w = el.offsetWidth
        //     let h = el.offsetHeight
        //     return w + h
        // }
        
        // 所以对于使用次数少的变量可以在使用的时候再去将其寻找处理，不必要提前做缓存，可减少代码编译时间
        // var test = el => el.offsetWidth + el.offsetHeight


        // 减少声明
        // 执行效率较低， 但是可读性高，代码易维护 
        var test = () =>{
            var name = 'name'
            var age = 18
            var str = 'str'
            return name+age+str
        }

        // 减少声明， 可提高执行效率
        // 但不易于代码维护与可读性不强
        var test = () =>{
            var name = 'name',
                age = 18,
                str = 'str'
            return name+age+str
        }

        console.log(test(box))
    </script>
</body>
</html>